<template>
	<div class="content" v-if="show_page == 0">
		<div class="content-top">
			车辆管理_车辆详情
		</div>
		<div class="car-title">
			<div class="car-title-left">基本信息</div>
			<div class="car-title-right" v-if="info.status == 0" @click="is_edit = true"><i class="el-icon-edit"></i>修改</div>
		</div>
		<div class="car-detail">
			<el-row>
				<el-col :span="8">车架号：{{info.vin}}</el-col>
				<el-col :span="8">车牌号：{{info.licensePlateNumber}}</el-col>
				<el-col :span="8">车牌类型：<template v-if="item.value == info.licensePlateType" v-for='item in dict.licensePlateType'>{{item.type}}
					</template></el-col>
			</el-row>
			
			<el-row>
				<el-col :span="8">车主姓名：{{info.ownerName}}</el-col>
				<el-col :span="8">联系电话：{{info.ownerPhoneNum}}</el-col>
				<el-col :span="8">证件号：{{info.ownerIdcard}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">生产厂家：{{info.manufacturer}}</el-col>
				<el-col :span="8">电池包编号：{{info.initBatteryCode}}</el-col>
				<el-col :span="8">使用性质：<template v-if="item.value == info.property" v-for='item in dict.property'>{{item.type}}
					</template></el-col>
			</el-row>
			<el-row>
				<el-col :span="8">联系人姓名：{{info.chineseName}}</el-col>
				<el-col :span="8">联系人电话：{{info.contactsPhoneNum}}</el-col>
				<el-col :span="8">购买日期：</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">换电次数：{{info.switchNum}} 次</el-col>
				<el-col :span="8">车辆状态：<template v-if="item.value == info.status" v-for='item in dict.status'>{{item.type}}
					</template></el-col>
				<el-col :span="8">所属企业：{{info.enterpriseName}}</el-col>
			</el-row>
		</div>
		<div class="car-title">
			<div class="car-title-left">相关人员</div>
			<div class="car-title-right" @click="is_add_client = true"><i class="el-icon-edit"></i>添加人员</div>
		</div>
		<div class="car-detail-table">
			<el-table :data="info_user"  show-header stripe style="width: 100%;">
				<el-table-column prop="chineseName" align='center' label="姓名">
				</el-table-column>
				<el-table-column prop="type" align='center' label="角色关系">
					<template slot-scope="scope">
						<template v-if="scope.row.type == 0">
							车辆产权人
						</template>
						<template v-if="scope.row.type == 1">
							车辆管理员
						</template>
						<template v-if="scope.row.type == 2">
							车辆使用人
						</template>
					</template>
				</el-table-column>
				<el-table-column prop="mobileNum" align='center' label="联系电话">
				</el-table-column>
				<el-table-column align='center' label="操作" >
					<template slot-scope="scope">
						<el-button @click="showInfoUser(scope.row)"  type="text" size="small"><i class="el-icon-view"></i> 详情</el-button>
						<el-button @click="infoUserDel(scope.row)" v-if="scope.row.type != 0" type="text" size="small"><i class="el-icon-delete"></i> 移除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="car-title">
			<center>
				<el-button :disabled="info.status != 4" type="primary" @click='show_page = 4'><i class="el-icon-view"></i>换电记录</el-button>
				<el-button :disabled="info.status != 4" type="primary" @click='show_page = 3'><i class="el-icon-view"></i>交班记录</el-button>
				<el-button :disabled="info.status != 4" type="primary" @click='show_page = 2'><i class="el-icon-view"></i>历史轨迹</el-button>
				<el-button :disabled="info.status != 4" type="primary" @click='show_page = 1'><i class="el-icon-view"></i>实时轨迹</el-button>
				<el-button type="primary" @click='show_list'><i class="el-icon-back"></i>返回</el-button>
				<el-button :disabled="info.status != 0" type="primary" @click='is_checkout = true'><i class="el-icon-upload2"></i>出库</el-button>
				<el-button :disabled="info.status != 1" type="primary" @click='is_approval = true'><i class="el-icon-edit"></i>审核</el-button>
				<el-button :disabled="info.status != 3" type="primary" @click='is_approval = true'><i class="el-icon-edit"></i>审批</el-button>
			</center>
		</div>
		<template v-if="is_checkout">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CarCheckout @saveCheckout='saveCheckout' :id='info.id' :vin='info.vin'></CarCheckout>
			</div>
		</template>
		<template v-if="is_approval">
			<div class="all-screen"></div>
			<div class='add-box'>
				<Approve @saveApproval='saveApproval' :id='info.id' :status='info.status'></Approve>
			</div>
		</template>
		<template v-if="is_add_client">
			<div class="all-screen"></div>
			<div class='add-box'>
				<AddClient @saveAddClient='saveAddClient' :id='info.id' :status='info.status'></AddClient>
			</div>
		</template>
		<template v-if="is_info_user">
			<div class="all-screen"></div>
			<div class='add-box'>
				<ClientDetail @saveInfoUser='saveInfoUser' :id='userid'></ClientDetail>
			</div>
		</template>
	</div>
	<FindRealTimeRoute v-else-if='show_page == 1' @close='close' :id='info.id'></FindRealTimeRoute>
	<FindHistoricalRoute v-else-if='show_page == 2' @close='close' :id='info.id'></FindHistoricalRoute>
	<HandoverhistoryFindPage v-else-if='show_page == 3' @close='close' :id='info.id'></HandoverhistoryFindPage>
	<VehicleSwitchRecord v-else-if='show_page == 4' @close='close' :id='info.id' :vin='info.vin'></VehicleSwitchRecord>
</template>

<script>
	import CarCheckout from '@/components/vehicle/CarCheckout.vue'
	import Approve from '@/components/vehicle/Approve.vue'
	import AddClient from '@/components/vehicle/AddClient.vue'
	import ClientDetail from '@/components/vehicle/ClientDetail.vue'
	import FindRealTimeRoute from '@/components/vehicle/FindRealTimeRoute.vue'
	import FindHistoricalRoute from '@/components/vehicle/FindHistoricalRoute.vue'
	import HandoverhistoryFindPage from '@/components/vehicle/HandoverhistoryFindPage.vue'
	import VehicleSwitchRecord from '@/components/vehicle/VehicleSwitchRecord.vue'
	let _this;
	export default{
		components:{
			CarCheckout:CarCheckout,
			Approve:Approve,
			AddClient:AddClient,
			ClientDetail:ClientDetail,
			FindRealTimeRoute:FindRealTimeRoute,
			FindHistoricalRoute:FindHistoricalRoute,
			HandoverhistoryFindPage:HandoverhistoryFindPage,
			VehicleSwitchRecord:VehicleSwitchRecord
		},
		props:['id'],
		data(){
			return{
				show_page:0,
				info:{status:0},
				info_user:[],
				dict:'',
				is_checkout:false,
				is_approval:false,
				is_add_client:false,
				is_info_user:false,
			}
		},
		created() {
			_this = this;
		},
		mounted() {
			this.get_dict();
			this.get_info();
		},
		methods:{
			get_dict() {
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
					.then(function(res) {
						if (res != '')
							_this.dict = res.data;
					})
			},
			get_info(){
				this.$axios.get(this.$global.serverIp + 'vehicle/vehicle/detail/' + this.id)
					.then(function(res) {
						if (res != ''){
							_this.info = res.data;
							_this.get_info_user();
						}
					})
			},
			get_info_user(){
				this.$axios.post(this.$global.serverIp + 'vehicle/vehicleuser/vehicleUserByVehicleId', {
					"vehicleId":_this.info.id
				})
				  .then(function (res) {
					  if(res != ''){
						 _this.info_user = res.data;
					  }
						
				  })
			},
			infoUserDel(row){
				this.$confirm('此操作将移除该人员, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post(this.$global.serverIp + 'vehicle/vehicleuser/delete', [row.id])
					  .then(function (res) {
						  if(res != ''){
							  _this.$popup.open('移除成功');
							  _this.get_info_user();
						  }
							
					  })
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
				
				
			},
			saveCheckout(type){
				if (type == 2) {
					this.get_info();
				}
				this.is_checkout = false;
			},
			showInfoUser(row){
				this.userid = row.userId;
				this.is_info_user = true;
			},
			saveInfoUser(){
				this.is_info_user = false;
			},
			saveAddClient(type) {
				if (type == 2) {
					this.get_info_user();
				}
				this.is_add_client = false;
			},
			saveApproval(type) {
				if (type == 2) {
					this.get_info();
				}
				this.is_approval = false;
			},
			show_list(){
				this.$emit("showList", 1);
			},
			close(type){
				this.show_page = type;
			}
		}
	}
</script>

<style>
	.car-title {
		margin: 26px 0px 0px 30px;
		overflow: hidden;
		font-size: 16px;
		width: 1088px;
	}
	
	.car-title-left {
		float: left;
		color: #606B82;
		margin-bottom: 16px;
	}
	
	.car-title-right {
		float: right;
		color: #FD943F;
		margin-bottom: 10px;
	}
	
	.car-title-right:hover {
		cursor: pointer;
		opacity: 0.3;
	}
	
	.car-detail {
		width: 1088px;
		height: 300px;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		padding-left: 30px;
		box-sizing: border-box;
		margin-left: 30px;
		padding-top: 40px;
	}
	.car-detail-table{
		width: 1088px;
		height: 300px;
		overflow: auto;
		background-color: #F2F6FA;
		border: 1px solid #C9CDD1;
		margin-left: 30px;
	}
	
	.car-detail .el-row {
		margin-bottom: 30px;
		font-size: 14px;
		color: #2D384C;
	}
	
</style>

